<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <style>
        *{
            margin:0;
            padding:0;
        }
        canvas{
            display: block;
            margin:0 auto;
            border:1px red solid;
        }
        ul{
            width:800px;
            list-style: none;
            margin:0 auto;
            box-sizing: border-box;
            overflow: hidden;
        }
        ul li {
            font-size:26px;
            height:40px;
            line-height:  40px;
            text-align: center;
            width:50%;
            float:left;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <ul>
        <li>source-over</li> <li>destination-over</li>
        <li>source-atop</li> <li>destination-atop</li>
        <li>source-in</li> <li>destination-in</li>
        <li>source-out</li> <li>destination-out</li>
        <li>lighter</li>  <li>copy</li> <li>xor</li>
    </ul>
</body>
<script>
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    canvas.height=600;
    canvas.width=800;

    var span = document.querySelectorAll("span");
    var list = document.querySelectorAll("li");
    for(let i = 0;i<list.length;i++){
        list[i].onclick = function(){
            var type = this.innerHTML;
            console.log(type);
            ctx.clearRect(0,0,canvas.width,canvas.height);
            changeType(type)
        }
    }

    ctx.globalAlpha=1;
    ctx.globalCompositeOperation="destination-over";
    ctx.fillStyle="red";
    ctx.fillRect(100,100,300,200);

    ctx.fillStyle="blue";
    ctx.fillRect(200,200,300,200);

    function changeType(type){
        ctx.save();
        ctx.globalAlpha=1;

        ctx.fillStyle="red";
        ctx.fillRect(100,100,300,200);
        ctx.globalCompositeOperation=type;
        ctx.fillStyle="blue";
        ctx.fillRect(200,200,300,200);
        ctx.restore();
    }
</script>
</html>